<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>滑动门效果</title>
		<style type="text/css">
			.container1{
				width: 200px;
				height: 300px;
				background: url(img/bj.png) repeat-y;
			}
			.container2{
				width: 200px;
				height: 300px;
				background: url(img/btn.png) repeat-x;
				background: linear-gradient(270deg, #fff, #333);
			}
		</style>
	</head>
	<body>
		<!--
			渐变背景色:
				background: linear-gradient(to bottom, #fff, #333);
				(
				1.方向: to bottom 从上到下|to right从左到右 | to left从右到左 | to top从下到上 | 30deg角度值
				2.起始颜色
				3.终止颜色
				)
		-->
		<div class="container1"></div>
		<div class="container2"></div>
	</body>
</html>
